<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>扩容码管理</title>
    <link rel="stylesheet" th:href="@{/layui/layui/css/layui.css}">

</head>
<body>
<div class="layui-main">
    <div class="demoTable" style="margin-top: 15px;">
        查询用户：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" placeholder="请输入用户名或邮箱" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload" onclick="query()">查询</button>
    </div>
    <br />
    <table id="datas" lay-filter="codes"  lay-data="datas"></table>
</div>

<!--        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
<!--        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->



<script th:src="@{/static/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
<script th:src="@{/layui/layui/layui.js}"></script>
<script>
    var tableIns = null;
    var table = null;
    layui.use(['form','table','layer'], function(){
        table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        tableIns = table.render({
            elem: '#datas'
            ,cache: false//关闭本地磁盘缓存，
            ,toolbar: '<div class="layui-btn-group">\n' +
                '  <button type="button" lay-event="add" class="layui-btn layui-btn-sm">\n' +
                '    <i class="layui-icon">&#xe654;</i>\n' +
                '  </button>\n' +
                '  <button type="button" lay-event="delete" class="layui-btn layui-btn-sm">\n' +
                '    <i class="layui-icon">&#xe640;</i>\n' +
                '  </button>\n' +
                '</div>' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,defaultToolbar:['filter', 'print']
            ,url:'/admin/root/selectcodelist'
            //,limit:20 //默认为10
            ,cols: [ [
                {type: 'checkbox', fixed: 'left' ,width:50}
                ,{field:'id', width:70, title: '编号', sort: true}, //sort：true页面可进行排序操作
                {field:'value',width:170,  title: '扩容值(M)'}
                ,{field:'code',  title: '扩容码'}
                ,{field:'level',width:110,  title: '操作',templet: function(d){
                        //return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';
                        return '<div class="layui-btn-group">\n' +
                            '  <button type="button" lay-filter="delete" class="layui-btn layui-btn-sm"  lay-event="del">\n' +
                            '    <i class="layui-icon">&#xe640;</i>\n' +
                            '  </button>\n' +
                            '</div>';
                    }
                }
                //, {title: '操作', fixed: 'right',width:250, align: 'center', toolbar: '#column-toolbar'}
            ] ]
            ,username:'sousuo'
            ,page: true
            ,done:function(res, curr, count){
                //数据的回调用，可不写
            }
        });

        table.on('tool(codes)', function(obj){
            var event = obj.event;
            var data = obj.data;
                if(event === 'del'){
                    layer.confirm('确认删除该条扩容码？', function(index){
                        //obj.del(); //删除对应行（tr）的DOM结构
                        delectcode(data.code)
                        layer.close(index);
                    });
                }
        });

        //监听头工具栏事件
            table.on('toolbar(codes)', function(obj){
               // var tc = table.checkStatus('tableid');//通过指定的table初始化id获取选中的数据
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                case 'add':
                    layer.open({
                        type: 1,
                        title:'用户容量',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['420px', '340px'], //宽高
                        content: '<div style="width: 360px;"><br /><br /><div class="layui-form-item">\n' +
                            '  <label class="layui-form-label">容量(M)</label>\n' +
                            '  <div class="layui-input-block">\n' +
                            '  <input type="text" name="title" id="sizeval" value="1024" required lay-verify="required" placeholder="请输入正整数" autocomplete="off" class="layui-input">  ' +
                            '  </div>\n<br />' +
                            '  <label class="layui-form-label">生成个数</label>\n' +
                            '  <div class="layui-input-block">\n' +
                            '  <input type="text" name="title" id="counts" value="10" required lay-verify="required" placeholder="请输入正整数" autocomplete="off" class="layui-input">  ' +
                            '<span style="color: #DAA5A6;">输入“-1”则为无限制,请输入整数</span><br/><br/><button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="generate()">保 存</button>'+
                            '  </div>\n' +
                            '</div></div>'

                    });


                    break;
                case 'delete':

                    layer.confirm('确认删除选中的扩容码？', function(index){
                        if(data.length === 0){
                            layer.msg('至少选择一个', {icon: 2});
                        } else {
                            var index= layer.msg('加载中', {
                                icon: 16
                                ,shade: 0.01
                            });
                            var arr=[];
                            $.each(data,function (index,val) {
                                arr.push(val.code);
                            });
                            $.ajax({
                                type: "POST",
                                url: "/admin/root/deletecodes",
                                data: {arr:arr},
                                dataType: "json",
                                success: function (data) {
                                    if (data ==1) {
                                        table.reload('datas');//重新获取表数据
                                        layer.msg('删除成功', {icon: 1});
                                    }else if(data>1){
                                        layer.msg('当你看到这个提示时，请向作者反馈。', {icon: 2});
                                    }else{
                                        layer.msg('部分数据可能未删除成功', {icon: 2});
                                    }
                                }
                            });
                            //layer.msg('删除');
                            layer.close(index);
                        }
                    });
                    break;
            };
        });

    });
function delectcode(code) {
    var index= layer.msg('加载中', {
        icon: 16
        ,shade: 0.01
    });
    $.ajax({
        type: "POST",
        url: "/admin/root/deletecode",
        data: {code:code},
        dataType: "json",
        success: function (data) {
            if (data > 0) {
                table.reload('datas');//重新获取表数据
                layer.msg('删除成功', {icon: 1});
            }else{
                layer.msg('部分数据可能未删除成功', {icon: 2});
            }
        }
    });
    layer.close(index);
}
function generate(code) {
    layer.msg('加载中', {
        icon: 16
        ,shade: 0.01
    });
    var sizeval = $('#sizeval').val();
    var counts = $('#counts').val();
    $.ajax({
        type: "POST",
        url: "/admin/root/addcode",
        data: {value:sizeval,counts:counts},
        dataType: "json",
        success: function (data) {
            if (data > 0) {
                table.reload('datas');//重新获取表数据
                layer.msg('添加成功', {icon: 1});
            }else{
                layer.msg('添加失败', {icon: 2});
            }
        }
    });
    layer.closeAll();
}

</script>
</body>
</html>